<template>
	<view>
		<uni-nav-bar fixed="true" title="注册账号" color="#FFF" backgroundColor="#80B6D5" height="120rpx" @clickLeft="back"
			statusBar="true">
			<view slot="left">
				<uni-icons type="back" size="30" color="#FFF"></uni-icons>
			</view>
		</uni-nav-bar>
		<view class="body" v-if="!success">
			<view class="card">
				<input type="text" v-model="username" placeholder="请输入昵称..." placeholder-class="text" maxlength="12" />
			</view>
			<view class="card">
				<input type="password" v-model="password" placeholder="请输入密码..." placeholder-class="text"
					maxlength="12" />
			</view>
			<view class="card">
				<input type="password" v-model="password2" placeholder="请再次输入密码..." placeholder-class="text"
					maxlength="12" />
			</view>
			<view class="card">
				<input confirm-type="done" @confirm="register" type="" v-model="email" placeholder="请输入有效邮箱..."
					placeholder-class="text" maxlength="20" />
			</view>
			<view class="reg" @click="register">
				注册
			</view>
		</view>
		<view v-else class="success">
			<image src="../../static/img/register/ok.png" mode="aspectFill" class="img"></image>
			<view style="text-align: center;font-size: 40rpx;margin-bottom: 30rpx;">
				注册成功
			</view>
			<view class="tip">
				为了保障信息安全，请务必保管好
			</view>
			<view class="tip">
				您的身份信息以及账号密码
			</view>
			<view class="uid">
				您的账号ID为: {{uid}}
			</view>
			<view class="btn" @click="login">
				复制ID并前往登录
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				success: false,
				username: "",
				password: "",
				password2: "",
				email: "",
				uid: 0
			}
		},
		methods: {
			register() {
				if (this.username == "") {
					uni.showToast({
						icon: "none",
						title: "昵称未填写"
					});
					return;
				}
				if (this.password == "" || this.password2 == "") {
					uni.showToast({
						icon: "none",
						title: "密码未填写"
					});
					return;
				}
				if (this.email == "") {
					uni.showToast({
						icon: "none",
						title: "邮箱未填写"
					});
					return;
				}
				if (this.password !== this.password2) {
					uni.showToast({
						icon: "none",
						title: "两次输入的密码不一致"
					});
					return;
				}
				if (!this.isEmail(this.email)) {
					uni.showToast({
						icon: "none",
						title: "邮箱格式错误"
					});
					return;
				}
				this.$request.TokenRequest({
					url: "/user/register"
				}, {
					username: this.username,
					password: this.password,
					email: this.email
				}).then(res => {
					if (res.state == 200) {
						this.uid = res.data.uid
						this.success = true
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			login() {
				console.log("re")
				uni.setClipboardData({
					data: this.uid + "",
					success() {
						uni.showToast({
							icon: 'none',
							title: "已复制到粘贴板"
						})
						uni.redirectTo({
							url: "../login/login"
						})
					},
					fail(e) {
						console.log(e)
					}
				})
			},
			back() {
				uni.navigateBack({})
			},
			isEmail(str) {
				var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				return reg.test(str);
			}
		}
	}
</script>

<style scoped lang="scss">
	.body {
		margin: 0 auto;
		width: 73%;
	}

	.card {
		background-color: #F5F5F5;
		margin: 70rpx auto;
		padding: 40rpx 55rpx;
		border-radius: 50rpx;

		// width: 70%;
		.text {
			font-size: 35rpx;
		}
	}

	.reg {
		font-size: 37rpx;
		color: #FFFFFF;
		background-color: #80B6D5;
		width: 360rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		padding: 15rpx;
		border-radius: 40rpx;
		margin: 100rpx auto;
	}

	.success {
		text-align: center;
	}

	.img {
		margin: 40rpx 0;
		width: 200rpx;
		height: 200rpx;
	}

	.tip {
		color: #B8B8B8;
		font-size: 30rpx;
		line-height: 50rpx;
	}

	.uid {
		margin-top: 30rpx;
		font-size: 40rpx;
	}

	.btn {
		font-size: 37rpx;
		color: #FFFFFF;
		background-color: #007AFF;
		width: 360rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		padding: 15rpx;
		border-radius: 40rpx;
		margin: 100rpx auto;
	}
</style>
